<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The fridge</title>
    
    <style type="text/css">
        body, h1 { margin:0;padding:0; }
        .space-line {clear:both;}
        .box    {color:black;
                width:inherit;
                height:85%;
                overflow:scroll;
                font-size:inherit;
                background-color:#E9E9E9;
                font-family: "Monotype";
                margin:0; padding:0;}

        .header{font-family:inherit; font-size:inherit;background-color:lightgrey;width:inherit;}
        .boxh    {background-color:lightgrey;
                width:inherit;
                font-size:10pt;
                font-family:monospace;
                height:100%;
                float:left;}
        .margin{width:10px;float:left;
                height:inherit;
                }
        .imm{
            position:absolute;
            }
        #inputbox{width:580px;float:left;}
        #inputbox2{width:130px;float:left;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://comet.${servicesurl}/_/comet.js"></script>
    <script type="text/javascript" src="/_/wz_dragdrop.js"></script>
    <script type="text/javascript" src="/_/comet-helper.js"></script>
</head>
<body>
    <script>
        /* yep. we have to change document.domain */
        document.domain = extract_xss_domain(document.domain);
    
    </script>
    <div  style="width:800px;height:500px;border:1px solid black;opacity:0.6;" id="bigbox" >
        % for j in range(40):
            <img width=0 height=0 id='j${j}' title="" alt="" />
        % endfor
    </div>
    
    <script>
        SET_DHTML(CURSOR_MOVE, TRANSPARENT, SCALABLE, ${ ','.join( [ '"j%s"+MAXWIDTH+400+MAXHEIGHT+400+MINWIDTH+10+MINHEIGHT+10' % j for j in range(60) ] ) });
    
    
    to_move   = {};
    to_resize = {};
    
    function my_DragFunc()
    {
        to_move[dd.obj.name] =  1;
        setTimeout(send,100);
    }
    function my_ResizeFunc(){
        to_resize[dd.obj.name] =  1;
        setTimeout(send,100);
    }
    
    function my_DropFunc()
    {
        // Write the name and coordinates of the dropped item into form inputs:
        //alert( dd.obj.name );
        var im = document.getElementById(dd.obj.name);
        var a = im.src.split('_');
        var size = dd.obj.w + 'x' + dd.obj.h;
        if(size != a[1]){
            var src = a[0] + '_' + size;
            im.src = src;
            dd.obj.src = src;
            dd.obj.swapImage(src);
        }
        if(to_move[dd.obj.name])
             to_move[dd.obj.name] = 2;
        if(to_resize[dd.obj.name])
             to_resize[dd.obj.name] = 2;
    }
    
    in_progress = false;
    update_uri = null;
    function schedule(msg){
        in_progress = true;
        function cb(xhr){
            if(xhr.readyState != 4)
                return;
            if(xhr.status != 200){
                channel_id = '';
                if(update_uri)
                    update_uri();
            }
            function xxx(){
                in_progress = false;
                send();
            }
            setTimeout(xxx,100);
        }
        /*
        function sss(){
        in_progress = false;
        send();
        }
        setTimeout(sss, 100);
        */
        ajax_crossdomain('http://comet.${TOPDOMAIN}/_/crossajax.html?a=a', 'POST', '/comet/' + channel_id + '/event', cb,
                'data=' + escape(msg).replace(/\+/g, '%2B') );
    }
    
    function send(){
        if(in_progress)
            return;
        
        var pam = {};
        for(var imid in map)
            pam[map[imid]] = imid;
        
        for(var k in to_resize){
            var a = dd.elements[k].w;
            var b = dd.elements[k].h;
            if(a != dd.elements[k].sent_w || b != dd.elements[k].sent_h){
                schedule('${username} ' + pam[k].substr(1)+' ' + 'S' + ' ' +  a + ' ' + b);
                dd.elements[k].sent_w = a;
                dd.elements[k].sent_h = b;
            }
            if(to_resize[k] == 2)
                delete(to_resize[k]);
            return;
        }
        for(var k in to_move){
            var a = dd.elements[k].x - dd.elements[k].sent_x;
            var b = dd.elements[k].y - dd.elements[k].sent_y;
            if(a!=0 || b!=0){
                schedule('${username} ' + pam[k].substr(1)+' ' + 'M' + ' ' + a + ' ' + b);
                dd.elements[k].sent_x = dd.elements[k].x;
                dd.elements[k].sent_y = dd.elements[k].y;
            }
            if(to_move[k] == 2)
                delete(to_move[k]);
            return;
        }
    }
    </script>
    
        <br />
    
    You can upload you image:
    <form action="." method="post" enctype="multipart/form-data">
        <label style="width:100px;float:left;">Desc: </label><input name="desc" type="text" />             <br />
        <label style="width:100px;float:left;">File: </label><input name="file" type="file" />             <br />
        <input type="submit" />
    </form>
        <br />
        <div>
            You should know that:
            <ul>
                <li>you can move (drag&amp;drop), resize (with <i>SHIFT</i>) and upload your own images</li>
                <li>please refresh the site once in a while (F5), we still have some synchronization issues</li>
                <li>this website is hosted on <a href="http://code.google.com/appengine/">Google App Engine</a></li>
                <li>it's using external <a href="http://movq.net">image resizer service</a></li>
                <li>it's using external <a href="http://movq.net">comet daemon service</a></li>
                <li>we use  <a href="http://www.walterzorn.com/dragdrop/dragdrop_e.htm">JavaScript drag&amp;drop library from Walter Zorn</a></li>
                <li>the sources are <a href="http://code.google.com/p/gae-services-examples/source/browse">availbe public</a></li>
            </ul>
        </div>


    <script>
        max_id = 0;
        map={};
        function user_comet_callback(id, author, data) {
            var a        = data.split(' ');
            
            var username = a[0];
            var im_id   = 'i'+a[1];
            var action  = a[2];
            var data    = a.slice(3).join(' ');
            var v1       = Number(a[3]);
            var v2       = Number(a[4]);
            
            if(username == '${username}')
                return;
            
            if(action == 'N'){
                if(author != 'admin')
                    return;
                var json = eval('(' + data  + ')'); //json :)
                var sid=''
                var pam = {};
                for(var imid in map)
                    pam[map[imid]] = imid;
                
                for(var j=0; j<40; j++){
                    sid = 'j'+j;
                    if(!pam[sid])
                        break;
                }
                map[im_id] = sid;
                //alert(sid + ' ' + im);
                var src = './' + json.key + '_' + json.width + 'x' + json.height;
                im=document.getElementById(sid);
                im.src = src;
                im.width  = json.width;
                im.height = json.height;
                im.alt    = json.desc;
                im.title  = json.desc;
                dd.elements[sid].hide();
                dd.elements[sid].show();
                dd.elements[sid].swapImage(src);
                dd.elements[sid].resizeTo(json.width, json.height);
                dd.elements[sid].moveTo(json.x, json.y);
                dd.elements[sid].sent_x = json.x;
                dd.elements[sid].sent_y = json.y;
                comet_log('add ' + sid);
            }else 
            if(action == 'D'){
                if(author != 'admin')
                    return;
                var sid=map[im_id];
                dd.elements[sid].hide();
                map[im_id] = null;
                comet_log('del ' + sid);
            }else
            if(action == 'M'){
                var sid=map[im_id];
                dd.elements[sid].moveBy(v1, v2);
                dd.elements[sid].sent_x += v1;
                dd.elements[sid].sent_y += v2;
            }else
            if(action == 'S'){
                var sid=map[im_id];
                dd.elements[sid].resizeTo(v1, v2);
                
                var im = document.getElementById(sid);
                var a = im.src.split('_');
                var size = dd.elements[sid].w + 'x' + dd.elements[sid].h;
                if(size != a[1]){
                    var src = a[0] + '_' + size;
                    im.src = src;
                    dd.elements[sid].src = src;
                    dd.elements[sid].swapImage(src);
                }
            }
        }
        
        function user_channel_callback(channel_id_changed, json){
            var events = json.events;
            for(var i=0; i<events.length; i++)
                user_comet_callback(0, 'admin', events[i]);
        }
        
        update_uri = generate_channel_id_updater('http://comet.${TOPDOMAIN}/_/iframe.html?a=a', '${username}', user_comet_callback, user_channel_callback);
    </script>

</body>
</html>
